{% extends 'steed_admin/navbar_demo.html' %}

{% block title %}
    <title>修改记录</title>
{% endblock %}

{% load tags %}
{% block main %}
    {% get_meta admin_obj.model as meta %}
    {# 路径导航 #}
    <ol class="breadcrumb">
        <li><a href="{% url 'steed_admin:app_index' %}">Home</a></li>
        <li>{{ meta.app_label }}</li>
        <li><a href="{% url 'steed_admin:table_index' meta.app_label meta.model_name %}">{{ meta.verbose_name_plural }}</a></li>
        <li class="active">
            {# 通过form_obj.instance来判断，是添加页面还是修改页面 #}
            {% if form_obj.instance.id %}
{#                {% print_str form_obj.instance %}#}
                {{ form_obj.instance }}
            {% else %}
                增加 {{ meta.verbose_name }}
            {% endif %}
        </li>
    </ol>
    {# 页头 #}
    <div class="page-header">
        <div class="col-sm-2"></div>
        {% if form_obj.instance.id %}
            <h1>修改 {{ meta.verbose_name }}</h1>
        {% else %}
            <h1>增加 {{ meta.verbose_name }}</h1>
        {% endif %}
    </div>
    {# 显示全局错误 #}
    <div class="row">
    {% if form_obj.errors %}  {# 有错误 #}
        {% errors_get_all form_obj.errors as all_errors %}
        {% if all_errors %}  {# 有__all__错误 #}
            <p class="col-sm-offset-2 col-sm-10 bg-danger">{{ all_errors.as_text }}</p>
        {% else %}  {# 有错误，但不是__all__的 #}
            <p class="col-sm-offset-2 col-sm-10 bg-warning">请检查错误内容</p>
        {% endif %}
    {% else %}  {# 没有错误，随便显示点啥 #}
        <p class="col-sm-offset-2 col-sm-10 bg-info">有 * 星号的是必填项</p>
    {% endif %}
    </div>
    {# 水平排列的表单 #}
    <form class="form-horizontal" novalidate method="post">
        {% csrf_token %}
        {% for field in form_obj %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}" class="col-sm-2 control-label">
                    {% if field.field.required %}<span class="text-danger">*</span>{% endif %}
                    {{ field.label }}{{ form_obj.label_suffix }}
                </label>
                {% if field.name in admin_obj.filter_horizontal %}
                    <div class="col-sm-6">
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </span>
                            <input type="text" class="form-control search-fields" placeholder="过滤" />
                        </div>
                        <div class="input-group">
                            <select multiple class="form-control">
                                {% get_m2m_lists form_obj field.name as options %}
                                {% for opt in options.rest %}
                                    <option value="{{ opt.id }}">{{ opt.name }}</option>
                                {% endfor %}
                            </select>
                            <div class="input-group-btn">
                                <div class="btn-group-vertical" role="group" aria-label="...">
                                    <button args="all_right" type="button" class="btn btn-default btn-xs" aria-label="Choose">
                                        <span class="glyphicon glyphicon-forward" aria-hidden="true"></span>
                                    </button>
                                    <button args="chosen_right" type="button" class="btn btn-default btn-xs" aria-label="Cancel">
                                        <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
                                    </button>
                                    <button args="chosen_left" type="button" class="btn btn-default btn-xs" aria-label="Choose">
                                        <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
                                    </button>
                                    <button args="all_left" type="button" class="btn btn-default btn-xs" aria-label="Cancel">
                                        <span class="glyphicon glyphicon-backward" aria-hidden="true"></span>
                                    </button>
                                </div>
                            </div>
                            <select name="{{ field.name }}" multiple class="form-control">
                                {% for opt in options.selected %}
                                    <option value="{{ opt.id }}">{{ opt.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                {% else %}
                    <div class="col-sm-{% get_field_long field %}">
                        {{ field }}
                    </div>
                {% endif %}
                {% if field.errors %}
                    <span class="text-danger">{{ field.errors.as_text }}</span>
                {% endif %}
            </div>
        {% endfor %}
        {# 各种提交的按钮 #}
        <div class="form-group">
            {# 用block来实现，添加页面去添加页面的html里自定义 #}
            {% block submit_group %}
             <div class="col-sm-2">
                 {% with request.resolver_match.kwargs as kwargs %}
                     {% url 'steed_admin:table_delete' kwargs.app_label kwargs.model_name kwargs.obj_id as del_url %}
                     <a class="btn btn-danger pull-right" href="{{ del_url }}">删除</a>
                 {% endwith %}
            </div>
            <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">保存修改</button>
            </div>
            {% endblock %}
            {# 下面是通过form_obj.instance判断的实现方法 #}
{#            {% if form_obj.instance %}  {# 修改页面有删除按钮和提交按钮 #}
{#             <div class="col-sm-2">#}
{#                 {% with request.resolver_match.kwargs as kwargs %}#}
{#                     {% url 'steed_admin:table_delete' kwargs.app_label kwargs.model_name kwargs.obj_id as del_url %}#}
{#                     <a class="btn btn-danger pull-right" href="{{ del_url }}">删除</a>#}
{#                 {% endwith %}#}
{#            </div>#}
{#            <div class="col-sm-10">#}
{#                <button type="submit" class="btn btn-primary">保存修改</button>#}
{#            </div>#}
{#            {% else %}  {# 添加页面只有提交按钮 #}
{#                <div class="col-sm-offset-2 col-sm-10">#}
{#                    <button type="submit" class="btn btn-primary">确认添加</button>#}
{#                </div>#}
{#            {% endif %}#}
        </div>
    </form>
{% endblock %}

{% if admin_obj.filter_horizontal %}
{% block js %}
    <script>
    $(function () {
        // 实现多对多关联表单修改的
        $('form .input-group select[multiple]').dblclick(function () {
            $(this).siblings('select[multiple]').append($(this).children(':selected')).val([])
        });
        $('form.form-horizontal').submit(function () {
            $(this).find('.input-group select[multiple][name]>option').prop('selected', true);
        });
        // 四个按钮的事件
        $('form .input-group div.btn-group-vertical button').click(function () {
            var args = $(this).attr('args');
            moveOptions(this, args)
        });
        var moveOptions = function (ths, args) {
            var left = $(ths).parents('div.input-group-btn').prevAll('select[multiple]');
            var right = $(ths).parents('div.input-group-btn').nextAll('select[multiple]');
            switch(args)
            {
                case 'all_right':
                    right.append(left.children('option:visible')).val([]);
                    break;
                case 'all_left':
                    left.append(right.children('option')).val([]);
                    break;
                case 'chosen_right':
                    right.append(left.children(':selected')).val([]);
                    break;
                case 'chosen_left':
                    left.append(right.children(':selected')).val([]);
                    break;
            }
        };
        // 过滤功能
        $('input.search-fields').on('input propertychange', function () {
            var searchText = $(this).val();
            $(this).parents('div.input-group').nextAll('div.input-group').find('select[multiple]:first>option')
                .each(function () {
                    console.log($(this).text().indexOf(searchText));
                    $(this).attr('hidden', $(this).text().indexOf(searchText)===-1)
                });
        })
    })
    </script>
{% endblock %}
{% endif %}



